<template>
  <div class="message-notification">
    <van-nav-bar fixed>
      <template #left>
        <van-tabs v-model:active="messageType">
          <van-tab title="消息"></van-tab>
          <van-tab title="通知"></van-tab>
        </van-tabs>
      </template>
      <template #right>
        <van-popover
          v-model:show="showPersonAbout"
          placement="bottom-end"
          :actions="popoverActions"
          @select="onSelectPopover"
        >
          <!-- 自定义的popover内容，由于挂载在#app上面，因此在这里修改样式 -->
          <div class="self-popover" style="width: 128px">
            <div
              class="self-popover-item"
              style="
                height: 44px;
                margin: 0 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #eaeaea;
              "
              @click="clickPopover('add')"
            >
              <i
                style="
                  width: 24px;
                  height: 24px;
                  margin-right: 10px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
                class="iconfont icon-jiahao_o"
              ></i>
              <span style="flex: 1; font-size: 14px; color: #666">
                添加好友
              </span>
            </div>
            <div
              class="self-popover-item"
              style="
                height: 44px;
                padding: 0 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              @click="clickPopover('list')"
            >
              <i
                style="
                  width: 24px;
                  height: 24px;
                  margin-right: 10px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
                class="iconfont icon-renyuanliebiao"
              ></i>
              <span style="flex: 1; font-size: 14px; color: #666">
                好友列表
              </span>
            </div>
          </div>
          <template #reference>
            <i class="iconfont icon-31haoyou"></i>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>

    <!-- 点击popover的时候弹出背景层 -->
    <van-popup v-model:show="showPersonAboutBg"></van-popup>

    <div class="message-notification-container">
      <message-section v-if="messageType === 0" />
      <notification-section v-else />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import MessageSection from "./components/message-section.vue";
import NotificationSection from "./components/notification-section.vue";
const router = useRouter();
const messageType = ref<number>(0);
const showPersonAbout = ref<boolean>(false);
const showPersonAboutBg = ref<boolean>(false);
const popoverActions = [
  { text: "添加好友", icon: "add-o" },
  { text: "好友列表", icon: "icon-haoyouliebiao" },
];

watch(showPersonAbout, (newVal) => {
  console.log("执行测试", newVal);
  showPersonAboutBg.value = newVal;
});

const onSelectPopover = () => {
  showPersonAboutBg.value = true;
  Toast("开始选中了");
};

const clickPopover = (type: string) => {
  if (type === "add") {
    Toast("添加好友功能尚未动工，请耐心等待哟");
  } else if (type === "list") {
    router.push("/contact-list");
  }
  showPersonAbout.value = false;
  console.log(type, "type");
};
</script>

<style scoped lang="less">
.message-notification {
  height: calc(100vh - 102px);
  overflow: auto;
  padding-top: 52px;
  padding-bottom: 50px;
  background-color: var(--background-color-std-10);
  :deep .van-hairline--bottom:after {
    border-bottom-width: 0;
  }

  :deep .van-tabs__line {
    width: 15px;
  }

  :deep .van-tab {
    padding: 0 12px;
  }

  :deep .icon-31haoyou {
    width: 32px;
    height: 32px;
    background-color: var(--background-color-std-9);
    color: var(--font-color-std-2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  :deep .van-nav-bar__left {
    padding-left: 5px;
  }

  :deep .van-cell .van-cell__title {
    flex: 1;
  }
  :deep .van-cell .van-cell__value {
    flex: 2;
  }
}
</style>
